<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>背景图片与透明玻璃效果</title>  
<link rel="stylesheet" href="/css/bootstrap.min.css">  
</head>  
<style type="text/css">
	 table {
      width: 100%;
      border-collapse: collapse;
    }

    th,
    td {
      border: 1px solid black;
      padding: 15px;
      text-align: left;
    }

    th {
      background-color: #4CAF50;
      color: white;
    }
	body, html {  
	    height: 100%;  
	    margin: 0;  
	}  
	  
	.background {  
	    /* 设置背景图片 */  
	    background-image: url('/image/1.jpg'); /* 替换为你的图片URL */  
	    background-size: cover; /* 确保图片覆盖整个元素 */  
	    background-position: center; /* 图片居中显示 */  
	    height: 100vh; /* 设置为视口高度 */  
	    display: flex;  
	    justify-content: center; /* 水平居中子元素 */  
	    align-items: center; /* 垂直居中子元素 */  
	}  
	  
	.glassy-rectangle {  
	    width: 1200px;  
	    height: 700px;  
	    border-radius: 16px; /* 设置圆角 */  
	    background: rgba(255, 255, 255, 0.263); /* 半透明白色背景 */  
	     
	    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 可选，添加阴影增加立体感 */  
	    position: relative; /* 相对于其最近的定位祖先元素（在此例中为.background）进行定位 */  
	    z-index: 1; /* 确保它位于背景之上 */  
        box-shadow: 9px,9px,42px,0 rgba(0.47, 0.47, 0.47, 0.47)
	}  
	  
	/* 如果需要支持旧版浏览器，可以添加一个备选样式 */  
	.glassy-rectangle.no-backdrop-filter {  
	    background: rgba(255, 255, 255, 0.5); /* 更不透明的背景作为备选 */  
	}
</style>
<body>  
<div class="background">  
    <div class="glassy-rectangle row">
		<div  style="margin-top: 20px;">&nbsp;&nbsp;&nbsp;<img src="/image/3.png"><strong style="margin-left: 800px;"> 个人中心/客服中心</strong></div>  
        <div class="col-3" style="margin-top: 20px;">
        <h3 style="font-size: 30px; margin-top: 70px;">&nbsp;&nbsp;&nbsp;吃不饱食堂</h3>
        <h3 style="font-size: 30px; margin-top: 70px;">&nbsp;&nbsp;&nbsp;用户界面</h3>
        <h3 style="font-size: 30px; margin-top: 70px;">&nbsp;&nbsp;&nbsp;厨师排行</h3>
        <h3 style="font-size: 30px; margin-top: 70px;">&nbsp;&nbsp;&nbsp;菜品管理</h3>
        <h3 style="font-size: 30px; margin-top: 70px;">&nbsp;&nbsp;&nbsp;管理员登陆</h3>
        </div>
        <div class="col-9" style="margin-top: 60px;" >
            <input type="text" id="searchInput" placeholder="输入搜索内容"> 
            <button class="" style="border: none;" onclick="search()">搜索</button>
            <button class="" style="border: none; margin-left: 60px;" onclick="search()">录入菜品信息</button>
			<div class="border border-0 bg-light" style="width: 800px; height: 500px; overflow-y: scroll;">
			<table>
				<tr>
				  <th>菜品名称</th>
				  <th>菜品编号</th>
				  <th>特点</th>
				  <th>功能</th>
				  
				</tr>
				
				
			  </table>
			</div>
            
        </div>
       
            
        

</div>  
</body>  
</html>